<style>
    .rich-table-cell{
        font-size:15px;
    }
</style>
<f:view>
    <a4j:region>
    <h:form>
        <h:panelGrid columns="3" >
            <h:outputText value="Personal Postings of #{sessionBean.ejbSession.currentSite.site}" style="font-size: 20px; font-weight: bold;"/>
            <c:if test="${!empty sessionBean.areasCurrentSite}" >
            <h:outputText value=", " style="font-size: 20px; font-weight: bold;"/>
            <h:selectOneMenu id="area" value="#{adminBean.areaId}" >
                    <f:selectItem
                        itemValue="0"
                        itemLabel="All Areas"/>
                <c:forEach var="area" items="#{sessionBean.areasCurrentSite}" >
                    <f:selectItem
                        itemValue="#{area.id}"
                        itemLabel="#{area.area}"/>
                </c:forEach>
                <a4j:support event="onchange" action="#{adminBean.changeCurrentArea}" reRender="personalPostingsForm"/>
            </h:selectOneMenu>
            </c:if>
        </h:panelGrid>
    </h:form>
    <div align="center">
    <h:form>
        <h:panelGroup id="searchMessages" ><h:messages style="color: red" styleClass="errorMessage" /></h:panelGroup>
        <h:panelGrid columns="3" >
            <h:panelGrid columns="6" >
                <h:outputText value="Search for:"/>
                <h:inputText id="searchValue" maxlength="50" value="#{personalBean.searchValue}" />
                <h:outputText value="in:"/>
                <h:selectOneMenu id="personalCategorie" value="#{personalBean.personalCategorieId}" >
                        <f:selectItem
                            itemValue="0"
                            itemLabel="All Personals"/>
                    <c:forEach var="categorie" items="#{adminBean.personalCategories}" >
                        <f:selectItem
                            itemValue="#{categorie.id}"
                            itemLabel="#{categorie.categorie}"/>
                    </c:forEach>
                </h:selectOneMenu>
            </h:panelGrid>
            <a4j:commandButton id="submit" type="submit" value="Search" reRender="searchMessages,personalPostingsForm" />
            <h:panelGroup>
                <h:selectBooleanCheckbox value="#{personalBean.onlySearchTitles}" /><h:outputText value="only search titles"/>
                <h:selectBooleanCheckbox value="#{personalBean.hasImage}" /><h:outputText value="has image"/>
            </h:panelGroup>
            <h:panelGrid columns="2" >
                <h:outputText value="Poster's Age:"/>
                <h:panelGrid columns="7">
                    <rich:inplaceInput id="minAge" defaultLabel="min age" value="#{personalBean.searchMinAge}" inputWidth="50px" converter="integerConverter" converterMessage="the min age is not valid"/>
                    <h:outputText value=", "/>
                    <rich:inplaceInput id="maxAge" defaultLabel="max age" value="#{personalBean.searchMaxAge}" inputWidth="50px" converter="integerConverter" converterMessage="the max age is not valid"/>
                    <h:outputText value="."/>
                    <h:selectOneMenu id="am" value="#{personalBean.searchAm}" >
                        <f:selectItem
                            itemValue=""
                            itemLabel="all"/>
                        <f:selectItem
                            itemValue="a"
                            itemLabel="anonymous"/>
                        <f:selectItem
                            itemValue="m"
                            itemLabel="a men"/>
                        <f:selectItem
                            itemValue="w"
                            itemLabel="a women"/>
                        <f:selectItem
                            itemValue="t"
                            itemLabel="someone TG/TS/TV"/>
                        <f:selectItem
                            itemValue="mw"
                            itemLabel="a men and women"/>
                        <f:selectItem
                            itemValue="mm"
                            itemLabel="a group of men"/>
                        <f:selectItem
                            itemValue="ww"
                            itemLabel="a group of women"/>
                    </h:selectOneMenu>
                    <h:outputText value=" seeking " />
                    <h:selectOneMenu id="seeking" value="#{personalBean.searchSeeking}" >
                        <f:selectItem
                            itemValue=""
                            itemLabel="all"/>
                        <f:selectItem
                            itemValue="m"
                            itemLabel="a men"/>
                        <f:selectItem
                            itemValue="w"
                            itemLabel="a women"/>
                        <f:selectItem
                            itemValue="t"
                            itemLabel="someone TG/TS/TV"/>
                        <f:selectItem
                            itemValue="mw"
                            itemLabel="a men and women"/>
                        <f:selectItem
                            itemValue="mm"
                            itemLabel="a group of men"/>
                        <f:selectItem
                            itemValue="ww"
                            itemLabel="a group of women"/>
                    </h:selectOneMenu>
                </h:panelGrid>
            </h:panelGrid>
        </h:panelGrid>
    </h:form>
    <a4j:status startText="Searching..." stopText="Complete" />
    </a4j:region>
    <h:form id="personalPostingsForm">
        <rich:dataTable id="personalPostingsTable" rows="5" value="#{personalBean.listPersonals}" var="personal" border="1" >
            
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Publish Date" />
                </f:facet>
                <h:outputText value="#{personal.publishDate}" >
                    <f:convertDateTime type="date" dateStyle="medium"/>
                </h:outputText>
            </rich:column>
            
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="Title" />
                </f:facet>
                <h:outputLink value="/site/faces/posting.html?site=#{sessionBean.ejbSession.currentSite.id}&type=personal&id=#{personal.id}" >
                    <h:outputText value="#{personal.title}"/>
                </h:outputLink>
                <h:outputText value=" #{personal.yourAge} years old" rendered="#{personal.yourAge>0}" />
                <h:outputText value=" #{personal.am}" />
                <h:outputText value=" > #{personal.seeking}" rendered="#{personal.seeking!=null && personal.seeking!=''}" />
                <h:outputText value=" - (#{personal.location})" rendered="#{personal.location!=null && personal.location!=''}"/>
            </rich:column>
            
            <rich:column rendered="#{personalBean.personalCategorieId==0}">
                <f:facet name="header">
                    <h:outputText value="Categorie" />
                </f:facet>
                <h:outputText value="#{personal.categorie}" />
            </rich:column>
            
        </rich:dataTable>
        <rich:spacer height="10" />
        <rich:datascroller for="personalPostingsTable" page="#{personalBean.page}" maxPages="5" />
    </h:form>
    </div>
    <h:form>
        <h:commandLink value="Back to Welcome Page" action="#{personalBean.backEdit}" />
    </h:form>
    <rich:separator height="1" />
</f:view>